{extend name="public/layout" /}
{block name="head"}{/block}
{block name="body"}
<style>
  #add-group {
    display: none;
  }

  #move-group-btn {
    display: none;
  }

  .group-item .edit-group {
    display: none;
  }

  .group-item .edit-group.show-edit {
    display: block;
  }

  .group-item .group-info {
    cursor: pointer;
    line-height: 30px;
  }

  .group-item .group-info .action-icon {
    display: none;
  }

  .group-item .group-info:hover .action-icon {
    display: inline-block;
  }
</style>

<body>
  <div class="container-fluid p-t-15">
    <div class="row">
      <div class="col-sm-4 col-md-4 col-lg-2">
        <div class="card" id="left-menu" style="height:calc(100vh - 40px);overflow-y: auto;">
          <div class="card-header card-header-sm">
            <h4>附件分组</h4>
            <ul class="card-actions">
              <li>
                <button type="button" onclick="$('#add-group').css('display','block')">
                  <i class="mdi mdi-plus"></i></button>
              </li>
            </ul>
          </div>
          <form id="add-group" action="/system/attachment/group.html?action=add" style="padding:10px;">
            <div class="input-group">
              <input type="text" class="form-control" name="group_name" placeholder="新增分组名称" datatype="*">
              <span class="input-group-btn">
                <button class="btn btn-default btn-sub" type="button">新增</button>
                <button class="btn btn-default" type="button" onclick="$('#add-group').hide()">取消</button>
              </span>
            </div>
            <span class="error-msg text-danger"></span>
          </form>
          <ul class="list-group" id="group-list"></ul>
        </div>
      </div>
      <div class="col-sm-8 col-md-8 col-lg-10">
        <div class="card">
          <div class="card-header card-header-sm">
            <form id="search-form" class="form-inline">
              <input type="hidden" id="group_id" name="group_id@=">
              <div class="form-group">
                <select class="form-control" name="search_field">
                  <option value="file_url">文件路径</option>
                  <option value="original_name">源文件名</option>
                </select>
              </div>
              <div class="form-group">
                <input type="text" class="form-control" name="search_value" />
              </div>
              <div class="form-group">
                <label>文件类型：</label>
                <select class="form-control" name="file_type@=" onchange="helper.refreshTable()">
                  <option value="">全部</option>
                  <option value="image">图片</option>
                  <option value="xls">表格</option>
                  <option value="doc">文档</option>
                  <option value="code">代码</option>
                  <option value="zip">压缩包</option>
                  <option value="video">视频</option>
                  <option value="audio">音频</option>
                </select>
              </div>
              <div class="form-group">
                <label>日期区间：</label>
                <input type="text" class="form-control f-laydate" name="upload_time@between time" data-range="true"
                  data-type="date" />
              </div>
              <button type="button" onclick="helper.refreshTable()" class="btn btn-default">
                <i class="mdi mdi-magnify"></i> 搜索
              </button>
            </form>
          </div>
          <div class="p-lr-15">
            <div class="toolbar">
              <div class="f-upload" data-type="file" data-callfn="doAction.uploadAfter">
                <input style="visibility:hidden;height:0;" type="file" />
                <button type="button" class="btn btn-primary upload-btn">
                  <i class="mdi mdi-upload"></i> 上传
                </button>
                <a href="javascript:void(0);" class="btn btn-danger" onclick="doAction.del();">
                  <i class="mdi mdi-window-close"></i> 删除</a>
                <div class="btn-group" id="move-group-btn">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    移动到分组 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu"></ul>
                </div>
              </div>
            </div>
            <div class="table-responsive">
              <table id="grid" class="table"></table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/html" id="file-tpl">
    <div class="attachment-file-item">
      <a href="${data.file_url}" target="_blank" class="file-ext ${data.file_type}"
         {@if data.file_type=='image'}style="background-image:url(${data.file_url})"{@/if}></a>
      <div class="file-info">
        <div class="one-cut">源文件名：${data.original_name}</div>
        <div class="one-cut">文件类型：${data.file_type}</div>
        <div class="one-cut">文件路径： <a href="${data.file_url}" target="_blank" data-toggle="tooltip" data-placement="left"
                                      title="${data.original_name}">${data.file_url}</a></div>
      </div>
    </div>
  </script>
  <script type="text/html" id="group-list-tpl">
  <li class="list-group-item group-item" data-id="" data-info=''>
    <div class="row group-info">
      <div class="col-sm-8">
        全部附件
      </div>
    </div>
  </li>
  {@each data as value}
  <li class="list-group-item group-item {@if group_id==value.id}active{@/if}" data-id="${value.id}"
      data-info='${json2str(value)}'>
    <div class="row group-info">
      <div class="col-sm-8">
        ${value.group_name}
        {@if value.file_num>0}(${value.file_num}){@/if}
      </div>
      {@if value.id>0}
      <div class="col-sm-4 text-right">
        <a class="mdi mdi-pencil action-icon icon-primary text-gray" data-type="show"
           onclick="doAction.editGroup(this)"></a>
        <a class="mdi mdi-window-close action-icon icon-danger text-gray"
           onclick="doAction.delGroup(${value.id})"></a>
      </div>
      {@/if}
    </div>
    <div class="edit-group"></div>
  </li>
  {@/each}
</script>
  <script type="text/html" id="edit-group-form">
  <form id="edit-group" action="/system/attachment/group.html?action=edit">
    <div class="input-group input-group-sm">
      <input type="hidden" name="id" value="${info.id}">
      <input type="text" class="form-control" name="group_name" value="${info.group_name}" placeholder="分组名称">
      <span class="input-group-btn">
                <button class="btn btn-default btn-sub" type="button">保存</button>
                <button class="btn btn-default" data-type="edit" onclick="doAction.editGroup(this)"
                        type="button">取消</button>
            </span>
    </div>
    <span class="error-msg text-danger"></span>
  </form>
</script>
  <script>
    $(function () {
      formHelper.init();
      doAction.getGroup();
      helper.bootstrapTable({
        url: "index.html",
        height: $(document.body).outerHeight() - 95,
        columns: [
          { field: "checkbox", checkbox: true },
          { field: "id", title: "#", width: "60", sortable: true },
          { field: "id", title: "ID", width: "50" },
          { field: "group_name", title: "分组", width: "100" },
          { field: "driver", title: "上传驱动", width: "100" },
          {
            field: "original_name", title: "附件信息", width: "100",
            formatter: function (value, row, index) {
              return juicer($('#file-tpl').html(), { data: row });
            }
          },
          { field: "file_size", title: "文件大小", width: "150" },
          { field: "upload_time", title: "上传时间", width: "200" }
        ]
      });
      /*新增分组*/
      formHelper.subForm(function () {
        $('#add-group').find('input[name="group_name"]').val('').focus();
        doAction.getGroup();
      }, '#add-group');
    });
    /*选择分组*/
    $(document).on('click', '.group-item', function () {
      $(this).addClass('active').siblings().removeClass('active');
      $('#group_id').val($(this).data('id'));
      $('#grid').bootstrapTable('refresh', { pageNumber: 1 });
      $('.toolbar .f-upload').attr('data-group', $(this).data('id'));
    });
    var doAction = {
      uploadAfter: function (res, obj) {
        helper.refreshTable();
        doAction.getGroup();
      },
      del: function () {
        var ids = $.map($('#grid').bootstrapTable('getSelections'), function (row, index) {
          return row.id;
        });
        if (ids.length == 0) {
          layer.msg('请选择附件资源');
          return false;
        }
        layer.confirm("确认删除选中资源吗?", { icon: 3 }, function (index) {
          helper.getAjax({
            url: "del.html?id=" + ids.join(','),
            success: function (res) {
              if (res.code == 1) {
                helper.refreshTable();
              } else {
                helper.tips(res.msg);
              }
            }
          });
          layer.close(index);
        });
      },
      /*获取分组*/
      getGroup: function () {
        var groupId = $('#group_id').val();
        helper.getAjax({
          url: '/system/attachment/group.html?action=list',
          success: function (res) {
            var html = juicer($('#group-list-tpl').html(), { data: res, group_id: groupId });
            $('#group-list').html(html);
            if (res.length > 1) {
              $('#move-group-btn').css('display', 'inline-block');
              var menu = $('#move-group-btn').find('.dropdown-menu');
              menu.empty();
              $.each(res, function (i, v) {
                menu.append('<li><a href="javascript:;" data-group-id="' + v.id + '" onclick="doAction.moveGroup(this)">' + v.group_name + '</a></li>')
              })
            } else {
              $('#move-group-btn').hide();
            }
          }
        })
      },
      editGroup: function (obj) {
        var type = $(obj).data('type');
        var item = $(obj).closest('.group-item');
        var info = item.data('info');
        if (type == 'edit') {
          item.find('.group-info').show();
          item.find('.edit-group').empty();
        } else {
          item.find('.group-info').hide();
          var html = juicer($('#edit-group-form').html(), { info: info });
          item.find('.edit-group').addClass('show-edit').html(html);
          formHelper.subForm(function () {
            doAction.getGroup();
          }, '#edit-group');
        }
      },
      delGroup: function (id) {
        layer.confirm("确认删除该分类吗?", { icon: 3 }, function (index) {
          helper.getAjax({
            url: '/system/attachment/group.html?action=del&id=' + id,
            success: function (res) {
              if (res.code == 1) {
                doAction.getGroup();
              } else {
                layer.msg(res.msg);
              }
            }
          });
          layer.close(index);
        });
      },
      moveGroup: function (obj) {
        var group_id = $(obj).data('group-id');
        var group_name = $(obj).text();
        var ids = $.map($('#grid').bootstrapTable('getSelections'), function (row, index) {
          return row.id;
        });
        if (ids.length == 0) {
          layer.msg('请选择要移动的附件资源');
          return false;
        }
        layer.confirm("确认移动选中资源到" + group_name + "分组吗?", { icon: 3 }, function (index) {
          helper.getAjax({
            url: "/system/attachment/group.html?action=move&group_id=" + group_id + "&ids=" + ids.join(','),
            success: function (res) {
              if (res.code == 1) {
                $('#grid').bootstrapTable('refresh', { pageNumber: 1 });
                doAction.getGroup();
              } else {
                helper.tips(res.msg);
              }
            }
          });
          layer.close(index);
        });
      }
    };
  </script>
</body>
{/block}